<template>
    <div>

        <el-table ref="multipleTable" highlight-current-row :data="tableData" index border lazy
            :tree-props="{children: 'children'}" row-key="id" style="width: 100%">
            <el-table-column label="序号" width="55">
                <template slot-scope="scope">
                    <p @click="childrenOrg(scope.$index,scope.row)"></p>
                </template>
</el-table-column>
<el-table-column prop="name" label="组织部门" width="220">
    <template slot-scope="scope">
                    <a>{{scope.row.name}}</a>
                </template>
</el-table-column>
<el-table-column prop="" label=" 地区">
    <template slot-scope="scope">
                    <p v-if="!scope.row.regionName">{{scope.row.proviceName}}-{{scope.row.cityName}}</p>
                    <p v-if="scope.row.regionName">
                        {{scope.row.proviceName}}-{{scope.row.cityName}}-{{scope.row.regionName}}</p>
                </template>
</el-table-column>
<el-table-column prop="" label="员工">
    <template slot-scope="scope">
                    <a @click="toUserManager(scope.row)" style="color: #409EFF !important;">查看员工</a>
                </template>
</el-table-column>
<el-table-column label="操作">操作</el-table-column>
</el-table>
</div>
</template>

<script>
    export default {
        data() {
            return {
                pagesize: 15,
                currentpage: 1,
                total: 1,
                tableData: [],
                childenTableData: [],
                address: [],
                proviceid: '', //省id
                cityid: '', //市id
                regionid: '', //区id
                name: '', //组织机构名称、编号
                pid: '0', //查看下级部门时候传的 查看记录的id
                imgVisible: true,
            }
        },
        methods: {
            aaa(index, row) {
                console.log(index, row);
                this.tableData[index].children = this.children;
                console.log(this.tableData);
            },
            getTableList() {
                console.log('--getTableList-pid-', this.pid)
                console.log('--前的tableData--', this.tableData)
                this.$ajax({
                    url: this.$root.jifuUrl + "/getOrganizationPage?" + 'page=' + this.currentpage + '&num=' + this.pagesize + '&proviceid=' + this.proviceid + '&cityid=' + this.cityid + '&regionid=' + this.regionid + '&rootcompanyid=1',
                    success: res => {
                        if (res.data.code == 200) {
                            for (let i = 0; i < res.data.data.list.length; i++) {
                                res.data.data.list[i]['children'] = [];
                                res.data.data.list[i]['hasChildren'] = true;
                            }
                            this.tableData = res.data.data.list
                            console.log('--tableData--', this.tableData)
                                // console.log('--tableData--', JSON.stringify(this.tableData))
                        }
                    }
                });
            },
            childrenOrg(index, row) {
                // this.imgVisible = false;
                console.log('childrenOrg===', index, row);
                this.$ajax({
                    url: this.$root.jifuUrl + "/getOrganizationPage?" + 'page=' + this.currentpage + '&num=' + this.pagesize + '&proviceid=' + this.proviceid + '&cityid=' + this.cityid + '&regionid=' + this.regionid + '&pid=' + row.id + '&rootcompanyid=1',
                    success: res => {
                        if (res.data.code == 200) {
                            console.log('-childenRow-tableData--', res.data.data.list)
                            this.tableData[index].children = res.data.data.list;
                            console.log(this.tableData);
                            for (let i = 0; i < res.data.data.list.length; i++) {
                                res.data.data.list[i]['children'] = [];
                                res.data.data.list[i]['hasChildren'] = true;
                            }
                            // this.tableData = res.data.data.list
                            // console.log('--tableData--', this.tableData)
                        }
                    }
                })
            },
        },
        mounted: function() {
            this.getTableList();
        }
    }
</script>

<style>

</style>